import { compile, h } from "vue"
import { Avatar, Tag, Tooltip, Divider, Input } from "ant-design-vue"
import { getFileAccessHttpUrl } from "/@/utils/common/compUtils"
import RenderHtml from "/@/components/My/RenderHtml.vue"
import TriggerEvent from "/@/components/My/TriggerEvent.vue"
import { ImagePreview } from "/@/components/Preview/index"

import { JumpRoute } from "/@/components/My/index"
import Icon from "/@/components/Icon"
import { getDictItemsByCode } from "/@/utils/dict/index"
import { filterMultiDictText } from "/@/utils/dict/JDictSelectUtil.js"
import { loadCategoryData } from "/@/api/common/api"
import { isEmpty } from "/@/utils/is"

const render = {
  renderInputTextArea: (props) => {
    return h(Input.TextArea, { ...props })
  },
  /**
   * 渲染分割线
   */
  renderDivider: () => {
    return h(Divider)
  },

  renderDividerWithValue: (value, options = {}) => {
    return h(Divider, options, { default: () => value })
  },

  renderJumpRoute: (props) => {
    return h(JumpRoute, { ...props }, { default: () => {} })
  },

  /**
   * 渲染列表头像
   */
  renderAvatar: (avatar) => {
    if (avatar) {
      const avatarList = avatar.split(",")
      return h(
        "span",
        avatarList.map((item) => {
          return h(Avatar, { src: getFileAccessHttpUrl(item), shape: "square", size: "default", style: { marginRight: "5px" } })
        })
      )
    } else {
      return h(
        Avatar,
        { shape: "square", size: "default", src: "/default-avatar.png" },
        {
          icon: () => h(Icon, { icon: "ant-design:file-image-outlined", size: 30 }),
        }
      )
    }
  },
  /**
   * 根据字典编码 渲染
   * @param v 值
   * @param code 字典编码
   * @param renderTag 是否使用tag渲染
   */
  renderDict: (v, code, renderTag = false, color = "") => {
    let text = ""
    const array = getDictItemsByCode(code)
    if (array instanceof Array) {
      const obj = array.filter((item) => {
        return item.value == v
      })
      if (obj.length > 0) {
        text = obj[0].label
      }
      return isEmpty(text) || !renderTag ? h("span", text) : h(Tag, { color }, () => text)
    }
    return h("span", v)
  },
  /**
   * 渲染图片
   * @param text
   */
  renderImage: ({ text }) => {
    if (!text) {
      return h(
        Avatar,
        { shape: "square", size: "large" },
        {
          icon: () => h(Icon, { icon: "ant-design:file-image-outlined", size: 30 }),
        }
      )
    }
    const avatarList = text.split(",")
    return h(
      "span",
      avatarList.map((item) => {
        return h(Avatar, { src: getFileAccessHttpUrl(item), shape: "square", size: "large", style: { marginRight: "5px" } })
      })
    )
  },
  /**
   * 渲染 Tooltip
   * @param text
   * @param len
   */
  renderTip: (text, len = 20) => {
    if (text) {
      let showText = text + ""
      if (showText.length > len) {
        showText = showText.substr(0, len) + "..."
      }
      return h(Tooltip, { title: text }, () => showText)
    }
    return text
  },
  /**
   * 渲染a标签
   * @param text
   */
  renderHref: ({ url, text }) => {
    if (!url) {
      return ""
    }
    const len = 20
    if (text.length > len) {
      text = text.substr(0, len)
    }
    return h("a", { href: url, target: "_blank" }, text)
  },
  /**
   * 根据字典渲染
   * @param v
   * @param array
   */
  renderDictNative: (v, array, renderTag = false) => {
    let text = ""
    let color = ""
    const obj = array.filter((item) => {
      return item.value == v
    })
    if (obj.length > 0) {
      text = obj[0].label
      color = obj[0].color
    }
    return isEmpty(text) || !renderTag ? h("span", text) : h(Tag, { color }, () => text)
  },

  renderSwitch: (text, code) => {
    const array = getDictItemsByCode(code)
    return text ? filterMultiDictText(array, text) : ""
  },
  renderCategoryTree: (text, code) => {
    const array = getDictItemsByCode(code)
    return filterMultiDictText(array, text)
  },
  renderTag(text, color) {
    if (text instanceof Array) {
      const hArray: any = []
      text.forEach((e) => hArray.push(h(Tag, { color, style: "margin: 2px" }, () => e)))
      return hArray.length == 0 ? h("span", text) : h("span", {}, hArray)
    } else {
      return isEmpty(text) ? h("span", text) : h(Tag, { color }, () => text)
    }
  },
  renderSpan(text) {
    return h("span", text)
  },

  renderHtml(text, props) {
    return h(RenderHtml, { text, ...props })
  },

  renderImagePreview(props) {
    return h(ImagePreview, { ...props })
  },

  renderTriggerEvent(props) {
    return h(TriggerEvent, { ...props })
  },

}
export { render }
